import React, {Component} from "react";
import ReactEcharts from 'echarts-for-react';
import picture from '../timg.jpg';
import axios from "axios";
import {server_addr} from "../index";

export default class Growing extends Component {
    constructor(props) {
        super(props);
        this.state = {
            option_1: {},
            option_2: {},
            option_3: {},
            option_4: {},
            option_5: {},
            default: "83%"
        }
        this.getData = this.getData.bind(this);
        this.Format = this.Format.bind(this);
    }

    getData(){
        var stock = window.location.href.split('?')[1].split('=')[1];
        //总资产增长率
        axios.get(server_addr+"/grow/assetsGrowRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_3:{
                    title: {left: 20, text: '总资产增长率'},
                    legend: {data: ['总资产增长率', '行业平均净资产增长率']},
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: "8%",
                        right: "8%"
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.Format(dates),
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{type: 'value', name: '%        '}],
                    series: [
                        {
                            name: '总资产增长率',
                            type: 'bar',
                            data: data_1,
                            itemStyle:{
                                normal:{
                                    barBorderRadius: 3
                                }
                            },
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //主营业务收入增长率
        axios.get(server_addr+"/grow/businessIncomeGrowRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_4:{
                    title: {left: 75, text: '主营业务收入增长率'},
                    legend: {left: 250, top: 20, data: ['主营业务收入增长率', '行业平均主营业务收入增长率']},
                    tooltip: {
                        trigger: 'axis',
                        transitionDuration:0,
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line']},
                            restore: {show: true}
                        }
                    },
                    grid: {
                        left: "15%",
                        right: "3%"
                    },
                    xAxis: [{
                        type: 'category',
                        data: this.Format(dates),
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '%        ',
                        splitLine:{
                            show:false
                        }
                    }],
                    series: [
                        {
                            name: '主营业务收入增长率',
                            type: 'bar',
                            data: data_1,
                            showBackground: true,
                            itemStyle:{
                                normal:{
                                    barBorderRadius: 3
                                }
                            }
                        },
                        {
                            name: '行业平均主营业务收入增长率',
                            type: 'line',
                            data: data_2,
                            itemStyle:{
                                normal:{
                                    color:'green',
                                }
                            },
                            showBackground: true,
                            markLine: {
                                data: [
                                    {type: 'average', lineStyle:{type:"solid", width: 2.5}}
                                ]
                            }
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //净利润增长率
        axios.get(server_addr+"/grow/netProfitGrowRatio?stock="+stock,{}).then((res)=>{
            let dates = [];
            let data_1 = [];
            let data_2 = [];
            for(var key in res.data){
                dates.push(key);
                data_1.push(res.data[key].split(',')[0]);
                data_2.push(res.data[key].split(',')[1]);
            }
            this.setState({
                option_5:{
                    tooltip: {trigger: 'axis', transitionDuration:0,
                        formatter: function (params) {
                            var htmlStr = '';
                            htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
                            for(var i=0;i<params.length;i++){
                                //前面的原点和他的颜色
                                htmlStr += '<span style="width: 8px;height: 8px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span><span style="color:#fff;">&nbsp;' + params[i].seriesName + '&nbsp;:&nbsp;</span>'+
                                    '<span style="color:#fff;">' + params[i].value + '&nbsp;%</span><br/>';
                            }
                            htmlStr += '</div>';
                            return  htmlStr
                        }},
                    legend: {
                        data: ['净利润增长率', '净资产增长率']
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.Format(dates)
                    },
                    yAxis: {type: 'value', name: '%        '},
                    series: [
                        {
                            name: '净利润增长率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            itemStyle:{
                                normal:{
                                    color:'red',
                                }
                            },
                            data: data_1
                        },
                        {
                            name: '净资产增长率',
                            type: 'line',
                            smooth: true,
                            stack: '总量',
                            itemStyle:{
                                normal:{
                                    color:'green',
                                }
                            },
                            data: data_2
                        }
                    ]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
        //固定资产比重
        axios.get(server_addr+"/grow/fixesAssetsRatio?stock="+stock,{}).then((res)=>{
            this.setState({
                option_2:{
                    series: [{
                        type: 'pie',
                        radius: ['55%', '85%'],
                        data: [
                            {
                                name:'固定资产比重',
                                value:res.data*100,
                                itemStyle:{
                                    color: {
                                        type: 'linear',
                                        colorStops: [{
                                            offset: 0, color: '#a71d2a' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: 'pink' // 100% 处的颜色
                                        }],
                                    },
                                },
                                label:{
                                    show:true,  //单独显示该数据项
                                    formatter:'{d}%'
                                }},
                            {
                                name:'暂无',
                                value:100-res.data*100,
                                itemStyle:{
                                    color: '#ccc',
                                }
                            }],
                        label:{
                            normal:{//默认不显示数据
                                show : false,
                                position:'center',
                            }
                        }
                    }]
                }
            })
        }).catch(function (error) {
            alert('未连接到服务器！');
        })
    }

    Format(dates){
        let new_dates = []
        for(var i=0; i<dates.length; i++){
            switch (dates[i].split('-')[1]) {
                case '03':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季1');
                    break;
                case '06':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季2');
                    break;
                case '09':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季3');
                    break;
                case '12':
                    new_dates.push(dates[i].split('-')[0].substring(2,)+'年季4');
                    break;
                default:
                    new_dates.push(dates[i]);
            }
        }
        return new_dates;
    }

    componentDidMount() {
        this.getData()
        this.interval = setInterval(()=>{
            if(this.props.location.state){
                this.setState({
                    default: "94%"
                })
            }else{
                this.setState({
                    default: "83%"
                })
            }
        },100)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        document.title = "财务状况分析";
        return (
            <div style={{width:this.state.default, height:"100vh", float:"right"}}>
                <div style={{width:"20%", height:"30vh", float:"left", margin:"4vh 0 0 4%"}}>
                    <p style={{fontWeight:"bold", fontSize:"1.2vw", marginLeft:"38%"}}>固定资产比重</p>
                    <ReactEcharts option={this.state.option_2} notMerge={true}
                                  style={{width:"100%", height:"25vh", marginLeft:"10%"}}/>
                </div>
                <div style={{width:"73%", height:"40vh", float:"left", margin:"4vh 0 0 2%"}}>
                    <ReactEcharts option={this.state.option_3} notMerge={true}
                                  style={{width:"90%", height:"40vh"}}/>
                </div>
                <div  style={{width:"55%", height:"50vh", float:"left", margin:"2vh 0 0 2%"}}>
                    <ReactEcharts option={this.state.option_4} notMerge={true}
                                  style={{width:"100%", height:"50vh"}}/>
                </div>
                <div style={{width:"38%", height:"50vh", float:"left", margin:"2vh 0 0 0"}}>
                    <ReactEcharts option={this.state.option_5} notMerge={true}
                                  style={{width:"100%", height:"50vh"}}/>
                </div>
            </div>
        );
    }
}